<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="${basePath }">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>西普茗茶商品-商品分类</title>
<meta name="renderer" content="webkit">

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://cdn.bootcss.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/themes/light.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />

<script type="text/javascript">
	var isHTML5 = true;
</script>
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<script src="js/excanvas.min.js"></script> 
    <script type="text/javascript">
		isHTML5 = false;
	</script>
<![endif]-->

<style type="text/css">
body {
	background: #fef9f3 !important;
}
</style>

</head>
<!--/head-->
<!-- BEGIN BODY -->
<body class="page-footer-fixed" style="padding-bottom: 20px !important;">
	<!-- BEGIN HEADER -->
	<div class="header navbar" style="background: #b9b9b9 !important;">
		<!-- BEGIN TOP NAVIGATION BAR -->
		<div class="input-group margin-top-10 margin-bottom-10">
			<span class="input-group-btn "> <a href="javascript:void(0)" class="btn text-white" type="button">
					<i class="fa fa-list-ul text-white"></i>
				</a>
			</span>
			<input id="search_input" type="text" class="form-control" placeholder="在此输入关键字">
			<span class="input-group-btn">
				<button class="btn gold" type="button" id="search_submit_button">
					<i class="fa fa-search"></i>
				</button>
			</span>
		</div>
		<!-- END TOP NAVIGATION BAR -->
	</div>
	<!-- END HEADER -->
	<div class="clearfix "></div>
	<!-- BEGIN CONTAINER -->
	<div class="page-container">

		<%-- <div class="tabbable tabs-left">
			<ul id="nav_tabs_ul" class="nav nav-tabs ">

				<c:forEach items="${viewAndList }" var="val_1">
					<li class="">
						<a href="#tab_6_${val_1.view.id }" data-toggle="tab" data-id="${val_1.view.id }" data-pid="${val_1.view.pId }" data-childrenIds="${val_1.view.childrenIds }"> ${val_1.view.name } </a>
					</li>
				</c:forEach>
			</ul>
			<div class="tab-content types_tab_content_div">
				<c:forEach items="${viewAndList }" var="val_1">
					<div class="tab-pane" id="tab_6_${val_1.view.id }">
						<div style="overflow: hidden;">
							<div class="container-fluid">
								<c:forEach items="${val_1.list }" var="val_2" varStatus="val_2_stat">
									<h4 class="block" data-id="${val_2.view.id }" data-pid="${val_2.view.pId }" data-childrenIds="${val_2.view.childrenIds }">
										<a class="text-black" href="spitems?tid=${val_2.view.childrenIds }">${val_2.view.name }</a>
									</h4>
									<div class="row">
										<c:forEach items="${val_2.list }" var="val_3" varStatus="val_3_stat">
											<div class="col-xs-4 text-center">
												<div class="thumbnail">
													<a href="spitems?tid=${val_3.view.childrenIds }" data-id="${val_3.view.id }" data-pid="${val_3.view.pId }" data-childrenIds="${val_3.view.childrenIds }">
														<c:choose>
															<c:when test="${val_3.view.picture!=null&&val_3.view.picture!=''}">
																<img src="${val_3.view.picture }" class="img-responsive center-block">
															</c:when>
															<c:otherwise>
																<img src="images/test_goods_pic_01.jpg" class="img-responsive center-block">
															</c:otherwise>
														</c:choose>
													</a>
													<div class="caption">
														<span>${val_3.view.name }</span>
													</div>
												</div>
											</div>
											<c:if test="${val_3_stat.count%3==0 }">
												<div class="clearfix"></div>
											</c:if>
										</c:forEach>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div> --%>

		<div class="panel-group accordion scrollable margin-top-10" id="accordion2">
			<c:forEach items="${viewAndList }" var="val_1">
				<div class="panel panel-default" style="background: transparent !important;">
					<div class="panel-heading" style="background: white !important;">
						<h4 class="panel-title">
							<a class="accordion-toggle padding-top-5 padding-bottom-5" data-toggle="collapse" data-parent="#accordion2" href="#collapse_${val_1.view.id }" data-id="${val_1.view.id }" data-pid="${val_1.view.pId }"
								data-childrenIds="${val_1.view.childrenIds }">
								<div class="media">
									<div class="pull-left click_to_go" data-url="spitems?tid=${val_1.view.childrenIds }">
										<c:choose>
											<c:when test="${val_1.view.picture!=null&&val_1.view.picture!=''}">
												<img alt="" src="${val_1.view.picture}" width="54px" height="54px" style="border: 1px solid #ccc; border-radius: 5px !important;">
											</c:when>
											<c:otherwise>
												<img alt="" src="images/test_goods_pic_01.jpg" width="54px" height="54px" style="border: 1px solid #ccc; border-radius: 5px !important;">
											</c:otherwise>
										</c:choose>
									</div>
									<div class="media-body padding-top-5">
										<i class="fa fa-angle-down pull-right text-light" style="font-size: 30px; margin-top: 15px;"></i>
										<h4 class="media-heading">${val_1.view.name }</h4>
										<h6 class="margin-top-8">
											<c:forEach items="${val_1.list }" var="val_2" begin="0" end="2" varStatus="val_2_stat">
												<span class="text-light">${val_2.view.name }</span>
											</c:forEach>
										</h6>
									</div>
								</div>
							</a>
							<%-- <a class="accordion-toggle accordion-toggle-styled" data-toggle="collapse" data-parent="#accordion2" href="#collapse_${val_1.view.id }" data-id="${val_1.view.id }" data-pid="${val_1.view.pId }"
								data-childrenIds="${val_1.view.childrenIds }"> ${val_1.view.name } </a> --%>
						</h4>
					</div>
					<div id="collapse_${val_1.view.id }" class="panel-collapse collapse">
						<div class="panel-body">
							<div class="container-fluid">
								<c:forEach items="${val_1.list }" var="val_2" varStatus="val_2_stat">
									<h4 class="block" data-id="${val_2.view.id }" data-pid="${val_2.view.pId }" data-childrenIds="${val_2.view.childrenIds }">
										<a class="text-black" href="spitems?tid=${val_2.view.childrenIds }">${val_2.view.name }</a>
									</h4>
									<div class="row">
										<c:forEach items="${val_2.list }" var="val_3" varStatus="val_3_stat">
											<div class="col-xs-4 text-center">
												<div class="thumbnail" style="border-radius: 5px !important;">
													<a href="spitems?tid=${val_3.view.childrenIds }" data-id="${val_3.view.id }" data-pid="${val_3.view.pId }" data-childrenIds="${val_3.view.childrenIds }">
														<c:choose>
															<c:when test="${val_3.view.picture!=null&&val_3.view.picture!=''}">
																<img src="${val_3.view.picture }" class="img-responsive center-block">
															</c:when>
															<c:otherwise>
																<img src="images/test_goods_pic_01.jpg" class="img-responsive center-block">
															</c:otherwise>
														</c:choose>
													</a>
													<div class="caption">
														<span>${val_3.view.name }</span>
													</div>
												</div>
											</div>
											<c:if test="${val_3_stat.count%3==0 }">
												<div class="clearfix"></div>
											</c:if>
										</c:forEach>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
				</div>
			</c:forEach>
		</div>


	</div>
	<!-- END CONTAINER -->
	<!-- BEGIN FOOTER -->
	<div class="footer">
		<div class="container">
			<div class="row">
				<div class="col-xs-3 text-center">
					<a href="./" class="icon-btn">
						<!-- <i class="fa fa-home text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-logo">&#xe626;</i>
						<div class="text-gold margin-top-2">首页</div>

					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="goods_type/get_shop_goods_type" class="icon-btn">
						<!-- <i class="fa fa-list-ul text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold con-qh-all-goods">&#xe622;</i>
						<div class="text-gold margin-top-2">类型</div>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="cart" class="icon-btn">
						<!-- <i class="fa fa-shopping-cart text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-cart">&#xe61b;</i>
						<div class="text-gold margin-top-2">购物车</div>

						<span class="badge badge-important" id="shooping_cart_icon_number"></span>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="item/infocenter.jsp" class="icon-btn">
						<!-- <i class="fa fa-user text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-infocenter">&#xe61d;</i>
						<div class="text-gold margin-top-2">个人中心</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/jquery-migrate.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.0.8/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<!-- END PAGE LEVEL SCRIPTS -->

	<script>
		$(function()
		{
			$("#nav_tabs_ul>li>a").first().trigger("click");

			$("#search_input").keydown(function(event)
			{
				if (event.keyCode == 13)
				{
					$("#search_submit_button").trigger("click");
				}
			});

			$("#search_submit_button").click(function()
			{
				var k = $("#search_input").val();
				var orderby = "";
				if ($("#order_by_div a.blue").length > 0)
				{
					orderby = $("#order_by_div a.blue").attr("data-orderby");
				}
				else if ($("#order_by_div a").length > 0)
				{
					orderby = $("#order_by_div a").attr("data-orderby");
				}
				if (k.length > 0)
				{
					window.location.href = "${basePath}spsearch?k=" + k + "&orderby=" + orderby;
				}
			});

			//跳转到页面去
			$(".click_to_go").each(function()
			{
				var obj = $(this);
				obj.click(function()
				{
					window.location.href = obj.attr("data-url");
				});
			});

			$.post("wc_get_wechat_info",
			{
				"currentUrl" : location.href.split('#')[0]
			}, function(json)
			{
				wx.config(
				{
					debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId : json.appId, // 必填，公众号的唯一标识
					timestamp : json.timestamp, // 必填，生成签名的时间戳
					nonceStr : json.nonceStr, // 必填，生成签名的随机串
					signature : json.signature,// 必填，签名，见附录1
					jsApiList : [ 'onMenuShareTimeline', 'chooseWXPay' ]
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				wx.ready(function()
				{

					$("#wx_kf").click(function()
					{
						$.post("u_wx_create_customservice_do", {}, function(return_json)
						{
							if (return_json.success == true)
							{
								wx.closeWindow();
							}
						},
						//返回类型
						"json");
					});

				});
				wx.error(function(res)
				{
				});
				if ("${buyerSession.buyerId}".length <= 0)
				{
					var code = "${param.code}";
					if (code.length > 0)
					{
						$.post("wc_get_user_info",
						{
							'code' : code
						}, function(return_json)
						{
							if (return_json.success == true)
							{
								//alert("openid(getUserInfo):" + return_json.openid);
							}
						},
						//返回类型
						"json");
					}
					else
					{
						$.post("wc_valid_have_this_person", {}, function(valid_json)
						{
							if (valid_json.success == false)
							{

								var authUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";

								authUrl = authUrl.replace("APPID", json.appId);
								authUrl = authUrl.replace("REDIRECT_URI", location.href.split('#')[0]);
								authUrl = authUrl.replace("SCOPE", "snsapi_base");
								authUrl = authUrl.replace("STATE", 1);
								window.location.href = authUrl;
							}
							else
							{
								//alert("openid(validHaveThisPerson):" + valid_json.openid);
							}
						},
						//返回类型
						"json");
					}
				}
			},
			//返回类型
			"json");

			//设置购物车购物数量
			if ($("#shooping_cart_icon_number").length > 0)
			{
				$.post('u_get_shoppingcar_number', {}, function(json)
				{
					if (json.success == true)
					{
						$("#shooping_cart_icon_number").fadeOut(100, function()
						{
							if (json.numberchange < 100)
							{
								$("#shooping_cart_icon_number").html(json.numberchange).fadeIn(100);
							}
							else
							{
								$("#shooping_cart_icon_number").html("99+").fadeIn(100);
							}
						});
					}
				},
				//返回类型
				"json");
			}
		});
	</script>
	<!-- END JAVASCRIPTS -->

</body>
</html>